@extends('admin.master')

@section('top')
<div class="top-breadcrumb pull-left">{!! Breadcrumbs::render() !!}</div>
@endsection

@section('content')
<div class="container-body" id="view">
	{!! Form::model($renew, ['route' => ['admin.renew.update', $renew->id], 'method'=>'patch', 'class'=>'form-horizontal']) !!}
		<input type="hidden" name="referer" value="{{ request()->header("referer") }}">
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">客户名称：</label>
			<div class="col-sm-8 row">
				<p class="form-control-static">{{ $renew->order->customer->name }}</p>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">续费日期：</label>
			<div class="col-sm-8 row">
				<p class="form-control-static">{{ $renew->order->created_at->format('Y-m-d') }}</p>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">到期日期：</label>
			<div class="col-sm-8 row">
				<p class="form-control-static">{{ $renew->order->expired_at->format('Y-m-d') }}</p>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"><span class="text-danger">*</span> 续费年限：</label>
			<div class="col-sm-8 row">
				<p class="form-control-static">{{ $renew->year }}</p>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width">业务员：</label>
			<div class="col-sm-8 row">
				{!! Form::hidden('saler_id', null, ['v-model'=>'saler']) !!}
				<div class="input-place len150" id="saler-select">
					<span class="filter-option pull-left" v-cloak>@{{ name ? name : '选择业务员' }}</span>
					<span class="bs-caret"><span class="caret"></span></span>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"><span class="text-danger">*</span> 续费金额：</label>
			<div class="col-sm-8 row">
				{!! Form::text('amount', null, ['class'=>'form-control len']) !!}
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"><span class="text-danger">*</span> 合同号：</label>
			<div class="col-sm-8 row">
				{!! Form::text('contract_no', null, ['class'=>'form-control len']) !!}
				<div class="contract-no-tip">
					<span class="contract-no-info">可能的合同号：</span>
					<p class="contract-no-list label-list">
						<img src="{{ url('images/loading-1.gif') }}">
					</p>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-4 control-label label-width"></label>
			<div class="col-sm-8 row">
				{!! Form::submit('提交续费', ['class'=>'btn btn-primary']) !!}
			</div>
		</div>
	{!! Form::close() !!}
	<!-- Modal -->
	<div class="modal fade" id="dialog-saler" tabindex="-1" role="dialog">
	  <div class="modal-dialog">
	    <div class="modal-content">
	        <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-label="true"><span aria-hidden="true">&times;</span></button>
	            <h4 class="modal-title">选择业务员</h4>
	        </div>
	        <div class="modal-body clearfix">
	        	<input type="text" class="form-control" v-model="word" placeholder="输入业务姓名搜索">
				<div class='salers-list mt15'>
					<a href='javascript:;' v-bind:class="{ 'active': saler==$key }" data-id="@{{ item.id }}" v-for="item in users | filterBy word">
					  @{{ item.name }}
					</a>
				</div>
	        </div>
	    </div>
	  </div>
	</div>
	<!-- Modal End -->
</div>
@endsection

@section('foot')
<script src="{{ url('js/department.js') }}"></script>
<script type="text/javascript">

   var salerLoadUrl = "{{ url('admin/salers-ajax') }}";
	var vm = new Vue({
		el: '#view',
		data: {
			saler: 0,
			name: '',
			users: [],
		}
	});

	$.getJSON(salerLoadUrl, function(data) {
		vm.users = data;
		vm.$set('name', data[vm.saler].name);
	});

	// 选择业务员
	$('#saler-select').on('click', function() {
		$('#dialog-saler').modal('show');
		return false;
	});

	$('.modal-body').on('click', '.salers-list a', function() {
		vm.$set('saler', $(this).data('id'));
		vm.$set('name', $(this).text());

		$('#dialog-saler').modal('hide');
	});

    // 异步获取可能的合同号
	$.ajax({
	   type: "GET",
	   url: "/admin/contract/customer/{{ $renew->order->customer->id }}",
	   success: function(data) {
	   		var html = [];
	   		var time = '';
			$.each(data, function(key, value) {
				time = value.created_at.split(' ');
				html.push('<a href="javascript:;"><span>'+value.contract_no+'</span><i>'+time[0]+'</i></a>');
			});	
			$('.contract-no-list').html(html.join(''));
	   }
	});

	$('.contract-no-list').on('click', 'a', function() {
		$("input[name='contract_no']").val($(this).find('span').text());
	});
</script>
@endsection